:root{
    --sgy-font-default: 'Roboto', Arial, Helvetica, sans-serif;
    --sgy-font-light: 'Roboto Lighter', Arial, Helvetica, sans-serif;
    --sgy-font-bold: 'Roboto Darker', Arial, Helvetica, sans-serif;
    --sgy-font-mono-space: 'Roboto Mono', Courier, monospace;
    --sgy-font-cursive: cursive;

    --sgy-background-color-default : #f1f4f4;
}

html {
    /* disable browsers synthesizing any font style variant (bold, italic) other than small-caps */
    font-synthesis: small-caps;
}

/*
 * Roboto Normal
 * These are the standard Roboto fonts in all weights
 */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    src: local("Roboto Thin"), local("Roboto-Thin"),
    url(fonts/Roboto/Roboto-Thin.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Light"), local("Roboto-Light"),
    url(fonts/Roboto/Roboto-Light.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"),
    url(fonts/Roboto/Roboto-Regular.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"),
    url(fonts/Roboto/Roboto-Medium.ttf) format("truetype")
}

/* max weight rendered is 500/medium. 700 included to prevent font synthesis when using 700/bold. */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Medium"), local("Roboto-Medium"),
    url(fonts/Roboto/Roboto-Medium.ttf) format("truetype")
}

/*
 * Roboto Italic
 * These are the standard Roboto Italic fonts in all weights
 */
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 100;
    src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
    url(fonts/Roboto/Roboto-ThinItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 300;
    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
    url(fonts/Roboto/Roboto-LightItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Italic"), local("Roboto-Italic"),
    url(fonts/Roboto/Roboto-Italic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
    url(fonts/Roboto/Roboto-MediumItalic.ttf) format("truetype")
}

/* max weight rendered is 500/medium. 700 included to prevent font synthesis when using 700/bold. */
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 700;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
    url(fonts/Roboto/Roboto-MediumItalic.ttf) format("truetype")
}

/*
 * Roboto Lighter
 * This is a lighter version of Roboto, Italic and Normal.
 * This font face exists for backwards compatibility of UIs which were
 * previously using Muli.
 */
@font-face {
    font-family: "Roboto Lighter";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Light"), local("Roboto-Light"),
    url(fonts/Roboto/Roboto-Light.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Lighter";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"),
    url(fonts/Roboto/Roboto-Medium.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Lighter";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
    url(fonts/Roboto/Roboto-LightItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Lighter";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
    url(fonts/Roboto/Roboto-MediumItalic.ttf) format("truetype")
}

/*
 * Roboto Darker
 * This is a darker version of Roboto, Italic and Normal.
 * This font face exists for backwards compatibility of UIs which were
 * previously using Muli Bold.
 */
@font-face {
    font-family: "Roboto Darker";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Bold"), local("Roboto-Bold"),
    url(fonts/Roboto/Roboto-Bold.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Darker";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Black"), local("Roboto-Black"),
    url(fonts/Roboto/Roboto-Black.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Darker";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
    url(fonts/Roboto/Roboto-BoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Darker";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Black Italic"), local("Roboto-BlackItalic"),
    url(fonts/Roboto/Roboto-BlackItalic.ttf) format("truetype")
}

/*
 * Roboto Mono
 * These are the standard Roboto Mono fonts in all weights
 */
@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 100;
    src: local("Roboto Mono Thin"), local("RobotoMono-Thin"),
    url(fonts/RobotoMono/RobotoMono-Thin.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 200;
    src: local("Roboto Mono Extra Light"), local("RobotoMono-ExtraLight"),
    url(fonts/RobotoMono/RobotoMono-ExtraLight.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Mono Light"), local("RobotoMono-Light"),
    url(fonts/RobotoMono/RobotoMono-Light.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Mono Regular"), local("RobotoMono-Regular"),
    url(fonts/RobotoMono/RobotoMono-Regular.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Mono Medium"), local("RobotoMono-Medium"),
    url(fonts/RobotoMono/RobotoMono-Medium.ttf) format("truetype")
}

/*
 * Roboto Mono Italic
 * These are the standard Roboto Mono Italic fonts in all weights
 */
@font-face {
    font-family: "Roboto Mono Italic";
    font-style: italic;
    font-weight: 100;
    src: local("Roboto Mono Thin Italic"), local("RobotoMono-ThinItalic"),
    url(fonts/RobotoMono/RobotoMono-ThinItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono Italic";
    font-style: italic;
    font-weight: 200;
    src: local("Roboto Mono Extra Light Italic"), local("RobotoMono-ExtraLightItalic"),
    url(fonts/RobotoMono/RobotoMono-ExtraLightItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono Italic";
    font-style: italic;
    font-weight: 300;
    src: local("Roboto Mono Light Italic"), local("RobotoMono-LightItalic"),
    url(fonts/RobotoMono/RobotoMono-LightItalic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono Italic";
    font-style: italic;
    font-weight: 400;
    src: local("Roboto Mono Italic"), local("RobotoMono-Italic"),
    url(fonts/RobotoMono/RobotoMono-Italic.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto Mono Italic";
    font-style: italic;
    font-weight: 500;
    src: local("Roboto Mono Medium Italic"), local("RobotoMono-MediumItalic"),
    url(fonts/RobotoMono/RobotoMono-MediumItalic.ttf) format("truetype")
}